<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>kamisama</title>
	
    <!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS
  ================================================== -->
  	<link rel="stylesheet" href="css/zerogrid.css">
	<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">	
	<link href='./images/favicon.ico' rel='icon' type='image/x-icon'/>
	<style>
		.btn{
			border: none;
			outline: none;
			color: #76D2C5;
			background-color: #fff;
			font-size: 17px;
			display: inline-block;
			margin-left: 20px;
			cursor: pointer;
		}
		.btn:hover{
			color: #666;
		}
		.alert {
			display: none;
			position: fixed;
			top: 10%;
			left: 50%;
			min-width: 200px;
			max-width: 450px;
			transform: translate(-20%,-50%);
			z-index: 99999;
			text-align: center;
			padding: 15px;
			border-radius: 5px;
		}

		.alert-success {
			color: #fff;
			background-color: rgba(119,209,196,0.65);
			border-color: #78d7c9;
		}

		.alert-info {
			color: #31708f;
			background-color: #d9edf7;
			border-color: #bce8f1;
		}

		.alert-warning {
			color: #8a6d3b;
			background-color: #fcf8e3;
			border-color: #faebcc;
		}

		.alert-danger {
			color: #a94442;
			background-color: #f2dede;
			border-color: #ebccd1;
		}
	</style>
	<!-- jq -->
	<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrap-body zerogrid">
<!--------------Header--------------->
	<header th:include="template::header"></header>

<!--------------Content--------------->
<section id="content">
	<div class="wrap-content">
		<div class="row block">
			<div id="main-content" class="col-2-3">
				<div class="wrap-col">
					<article>
						<div class="heading">
							<h2 th:text="${blog.btitle}">Sed accumsan libero quis mi commodo et suscipit</h2>
						</div>
						<div class="content">
							<img th:src="${blog.bimg}" style="width: 100%;margin-bottom:10px;"/>
							<div th:utext="${blog.bcontent}" style="text-indent: 2em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
								Donec libero. Suspendisse bibendum. Cras id urna.
								Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.
								Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.
								Cras fringilla magna.
								Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque.
								Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
								Donec libero.
								Suspendisse bibendum.
								Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.
							</div>
						</div>
						<div class="info">
							<p>By 管理员 on <span th:text="${blog.createtime}">December 01, 2012</span> - 访问量 <span th:text="${blog.pageview}">01</span></p>
						</div>
					</article>

					<article>
						<div>
							<div style="float: left;width: 50%;">
								<span style="margin-right: 20px;">上一篇</span>
								<a class="Previous">上一篇标题测试</a>
							</div>
							<div style="float: left;width: 50%;">
								<span style="margin-right: 20px;">下一篇</span>
								<a class="Previous">下一篇标题测试</a>
							</div>
						</div>
					</article>
					
					<section>
						<h3>Leave a Comment</h3>
						
						<form id="contact-form" method="post" onsubmit="return false">
						    <fieldset>
								<label><input id="nike" name="nike" value="Nike" onBlur="if(this.value=='') this.value='Nike'" onFocus="if(this.value =='Nike' ) this.value=''" /></label>
						        <label><input id="email" name="email" value="Email" onBlur="if(this.value=='') this.value='Email'" onFocus="if(this.value =='Email' ) this.value=''" /></label>
						        <textarea id="message" onBlur="if(this.value=='') this.value='Message'" onFocus="if(this.value =='Message' ) this.value=''">Message</textarea>
						        <div class="buttons">
									<p id="bid" th:text="${blog.id}" hidden="hidden">01</p>
									<p id="errorMsg" style="color: #76D2C5;"></p>
									<p id="clear" class="btn">Clear</p>
									<p id="send" class="btn">Send</p>
						        </div>											
						    </fieldset>           
						</form>
					</section>
				</div>
			</div>
			<div id="sidebar" class="col-1-3">
				<div class="wrap-col">
					<div class="box" th:include="template::about"></div>
					<div class="box" th:include="template::type"></div>
					<div class="box" th:include="template::hot"></div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--------------Footer--------------->
	<footer th:include="template::footer"></footer>

</div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>

<script>
	//校验nike
	function checkNike(){
		//1.获取用户名值
		let nike = $("#nike").val();
		//2.定义正则
		let val_nike = /^\w{5,10}$/;
		//3.判断，给出提示信息
		let flag = val_nike.test(nike);
		if (flag){
			//nike合法
			$("#nike").css("border","1px solid #76D2C5");
			$("#errorMsg").html("");
		}else{
			//nike非法
			$("#nike").css("border", "1px solid red");
			$("#errorMsg").html("Nike格式错误：单词字符，长度5到10位");
		}
		return flag;
	}
	//校验邮箱
	function checkEmail() {
		let email = $("#email").val();
		let val_email = /^\w+@\w+.\w+$/;
		let flag = val_email.test(email);
		if (flag){
			//邮箱合法
			$("#email").css("border","1px solid #76D2C5");
			$("#errorMsg").html("");
		}else{
			//邮箱格式非法
			$("#email").css("border", "1px solid red");
			$("#errorMsg").html("邮箱格式错误：xxx@xxx.xxx");
		}
		return flag;
	}
	//校验message是否为空
	function checkMessage(){
		let message = $("#message").val();
		if(message == null || message == '' || message == "Message"){
			$("#message").css("border", "1px solid red");
			$("#errorMsg").html("消息内容不能为空");
			return false;
		}
		var keyWordsList = [
			"傻逼",
			"sb",
			"智障",
			"垃圾",
			"laji",
			"辣鸡",
			"腊鸡"
		];
		for(var i=0;i<keyWordsList.length;i++){
			$("#message").val($("#message").val().replace(keyWordsList[i],"**"));
		}
		$("#message").css("border","1px solid #76D2C5");
		$("#errorMsg").html("");
		return true;
	}

	$("#nike").blur(function(){
		checkNike();
		console.log($("#bid").html());
	});
	$("#email").blur(function(){
		checkEmail();
	});
	$("#message").blur(function(){
		checkMessage();
	});

	//clear
	$("#clear").click(function(){
		clear();
	});
	function clear(){
		// $("#contact-form").reset();
		document.getElementById("contact-form").reset();
		$("#nike").css("border","1px solid #eeeeee");
		$("#email").css("border","1px solid #eeeeee");
		$("#message").css("border","1px solid #eeeeee");
		$("#errorMsg").html("");
	}

	//发送消息
	$("#send").click(function(){
		send();
	});
	function send(){
		if(checkNike() && checkEmail() && checkMessage()){
			$.post(
					"/sendComment",
					{'nike':$("#nike").val(),'email':$("#email").val(),'message':$("#message").val(),'bid':$("#bid").html()},
					function(data){
						if(data == "success"){
							success_prompt("发送成功",800);
							clear();
							$("#errorMsg").html("发送成功！");
						}else{
							fail_prompt("发送失败",800);
							$("#errorMsg").html("发送失败！");
						}
					}
			);
		}else{
			alert("检查数据！");
			$("#errorMsg").html("检查数据是否正确！");
		}
	}


	/**
	 * 弹出式提示框，默认1.2秒自动消失
	 * @param message 提示信息
	 * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
	 * @param time 消失时间
	 */
	var prompt = function (message, style, time)
	{
		style = (style === undefined) ? 'alert-success' : style;
		time = (time === undefined) ? 1200 : time;
		$('<div>')
				.appendTo('body')
				.addClass('alert ' + style)
				.html(message)
				.show()
				.delay(time)
				.fadeOut();
	};
	// 成功提示
	var success_prompt = function(message, time)
	{
		prompt(message, 'alert-success', time);
	};
	// 失败提示
	var fail_prompt = function(message, time) {
		prompt(message, 'alert-danger', time);
	};

</script>

</body>
</html>